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Abstract 

We have developed (1) a graph visualization system that allows 
users to explore graphs by viewing them as a succession of span- 
ning trees selected interactively, (2) a radial graph layout algorithm, 
and (3) an animation algorithm that generates meaningful visual- 
izations and smooth transitions between graphs while minimizing 
edge crossings during transitions and in static layouts. 

Our system is similar to the radial layout system of Yee et 
al. 1261 . but differs primarily in that each node is positioned on a 
coordinate system centered on its own parent rather than on a sin- 
gle coordinate system for all nodes. Our system is thus easy to 
define recursively and lends itself to parallelization. It also guaran- 
tees that layouts have many nice properties, such as: it guarantees 
certain edges never cross during an animation. 

We compared the layouts and transitions produced by our algo- 
rithms to those produced by Yee et al. Results from several ex- 
periments indicate that our system produces fewer edge crossings 
during transitions between graph drawings, and that the transitions 
more often involve changes in local scaling rather than structure. 

These findings suggest the system has promise as an interactive 
graph exploration tool in a variety of settings. 

CR Categories: 1.3.3 [Computer Graphics]: Picture/Image 
Generation — Viewing algorithms; H.5.0 [Information Interfaces 
and Presentation]: General 

Keywords: Graph and network visualization. Interaction, Focus -l- 
Context Techniques, Animation, Hierarchy visualization 

1 Introduction 

Visualization can help make graph structures comprehensible (7| 
\T2 23 1. However, edge crossings can chal lenge human perception 
of relationships between nodes |8| lI9ll24l . yet graphs often come 
to us as tangled webs that cannot be depicted without crossings in 
a two-dimensional viewing plane. 

Because trees can be laid out on a plane without edge crossings, a 
common approach is to base graph visualizations on spanning trees 
extracted from graphs 1 9 15 18 2^. Although the resulting draw- 
ings may discard some potentially significant edge information, a 
clearer mental picture of the full graph may nonetheless result if 
users can easily and intuitively explore multiple layouts based on 
different spanning trees. 

Yee et al. 1261 describe a tool that draws radial tree lay- 
outs (3| II31 1221 1251 of breadth-first spanning t rees, given a graph 
and a node selected to be the root (see Figure [7(b)l . A user may 
then select a new root node and the system transitions smoothly to a 
new layout based on the new root node. This transition is animated 
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by a succession of linear interpolations of the polar coordinates of 
positions of each node in the old and new layouts. Thus, a user can 
interactively explore a graph that would otherwise be too complex 
to visualize or comprehend as a single, static drawing. 

In drawings generated by Yee et al.'s radial layout method, suc- 
cessive generations of nodes lie on concentric circles centered on 
the root. Such layouts guarantee that all nodes of a given genera- 
tion are equidistant from the root and lend themselves to a smooth 
animation process. However, symmetries in the tree can be ob- 
scured because distantly related nodes may be positioned close to 
each other in the final layout just because they belong to the same 
generation. And, during animations, numerous edge crossings may 
occur. 

Our approach is similar to Yee et al.'s in that it bases its drawings 
on breadth-first rooted spanning trees extracted from graphs, allows 
users to interactively change views of each graph by selecting a new 
root, and smoothly transitions between successive layouts by mov- 
ing nodes along radial paths. However, unlike Yee et al., we place 
every subtree in the graph in a "parent-centric" circle surrounding 
its own subroot, instead of positioning each node on a "generation 
circle" centered on the root. This approach lends itself naturally 
to recursion, and naturally reflects the self-similar structure of re- 
cursively branching trees. Moreover, it guarantees that during the 
animation process the edges between parent and child never cross, 
a property Yee et al.'s algorithm does not provide. From an algo- 
rithmic perspective, each node's position depends only on its parent 
and siblings, not on its entire generation. Because the dependencies 
in our layout are therefore very local, drawings and animations in 
our system are potentially computable in a single, parallelizable, 
traversal of the tree. 

In broad strokes, our layout algorithm works as follows. First, 
we place the root in the center of the display with its children evenly 
distributed along a containment circle centered on the root. Second, 
we draw circles around the root's children and evenly distribute 
their children along containment arcs that ensure that neither sib- 
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Figure 2: A visual overview of how our algorithm constructs a new layout for a graph. In Figure 
of the drawing surround ed by its children. Next, the root's children are alloca ted containment arcs 
positioned within Figure [2(c)| The final static layout is shown in Figure [2(d)| 



the root is first placed at the center 
gure|2(b)] where their descendants are 



lings nor cousins overlap. Then the second process just proceeds 
recursively, so that successively distant descendants of the root are 
positioned on successively smaller containment arcs (Figure|2j- 

Our layouts have several aesthetic virtues: They have a flower- 
like, self-similar structure that differs from the "bulls-eye" appear- 
ance of Yee et al.'s layouts (compare Figure [T(a)| and Figure [T(b)t . 
And even though the distance between root and nonroot nodes is 
less directly represented than in Yee et al.'s system, there are pow- 
erful visual cues to compensate: Within a lineage, edge lengths 
decrease monotonically with distance from root, and all siblings 
within a family are arrayed along visually salient arcs equidistant 
from their common parent. Also, our out-facing containment arcs 
ensure that the correlation between graph distance and Euclidean 
distance from the root is more reliable than in parent-centered ap- 
proaches based on containment circles I13lll7ll22l . With regard 
to animating transitions, our algorithm ensures that sibling edges 
never cross when a new focal node is selected, and whenever the 
graph to be drawn is itself a tree. 

2 Data Model and Algorithms 

We assume that all graphs are connected, and regard any drawing 
of a spanning tree of a graph as a drawing of the graph. Since all 
edges are to be drawn as straight lines, we need only describe the 
mapping of nodes to points in the drawing plane (we use "node" to 
refer to both a vertex in a graph and to the location of the node on 
the drawing plane.) It is perhaps easiest to explain our algorithms in 
terms of a particular data model that completely describes a drawing 
in this restricted sense. 

Rather than represent the position of all nodes of some graph in 
terms of a single polar coordinate system centered at the origin of 
the drawing plane that all nodes share, we only use the standard 
drawing-plane's origin to represent the root node and its children. 
We represent every other node pos itio n in terms of polar coordi- 
nates centered at the node's parent 1101 . 

2.1 Parent-centered data model 

We now formally define this concept. Given a tree T and a drawing 
D of T, we recursively define a parent-centered model of (D, T) as 
follows. For any node v of T, the polar coordinates of v are given 
in the coordinate system 

(basis 1, i.e., if V is the root of T:) sharing the origin with the 
drawing plane and zero degrees with the positive direction of 
the drawing plane's ;c-axis. 



(basis 2, i.e., if v is a child of the root otT:) having the root of T 
as the origin and zero degrees as the ray from the root hav- 
ing the same direction as the positive direction of the drawing 
plane's x-axis, or 

(recursion, i.e., otherwise:) having v's parent in T as the origin 
and the ray from v's parent intersecting i''s grandparent as zero 
degrees. 

Thus nodes having the same parent share the same coordinate sys- 
tem and nodes having different parents have different coordinate 
systems. 

This data model applies to the static and dynamic layout algo- 
rithms described below. Note that we can (and do) represent any 
straight-line graph drawing this way, not just those produced by Al- 
gorithmQbelow. 

2.2 Static layout algorithm 

We define our static layout algorithm recursively as follows (see 
also Figure 13 . When we say that a nonroot node lies on a con- 
tainment circle, we are referring to the circle centered at the node's 
parent that intersects the node. Note that if two siblings are the 
same distance from their parent (this is a property of the drawings 
AlgorithmQproduces) then they share the same containment circle. 

Algorithm 1 Given a spanning tree T, for each node v of T let the 
coordinates of the root node he (0,0) and for each nonleaf node v 
let V[,. . ., I'm be V 's children. For each id { 1 , . . . , m} let the coor- 
dinates ofvi (in the parent-centered model) he 

(basis, i.e., if v is the root:) (Ini/m, r), where r is some user- 
defined value > 0, 

(recursion, i.e., otherwise:) {7t-<j>/2 + (j>i/m+^/{2m),r), where 
<p is some user-defined value > and r is 

• half of v's magnitude, ifv has no siblings, otherwise 

• the radius of the circle centered at v that intersects the 
midway point between v and v's nearest sibling(s) on 
their shared containment circle. 

Note that the value of r for any nonroot node depends only on the 
node's parent, so as claimed above all sibling nodes share the same 
value for r. This means they all lie on the same containment circle, 
which we call the containment circle of the parent node. 
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Figure 3: Isomorphic tree transition — Our visualization scheme transitions between two drawings of the same tree by sc aling e ach parent node's 
containment circle with its children. In this examp le, the user se lects a new root node from the initial drawing in Figure [3(a)| The containment 
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circles highlighted during the transition in Figures|3(b)|to|3(d)|grow and shrink as the graph moves to the 
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Figure 4: Spanning-tree-to-spanning-tree transition — The user's selection of a new node invokes a ne w spanning-tree-based drawing. Edges 
that will fade out are highlighted in Figure [4(a)| newly introduced edges are highlighted in Figure [4(e)| 



2.3 Animation algoritlim 

Our static layout algorithm leads to a simple and intuitive algorithm 
for animating transitions from one layout to another by interpolat- 
ing between the parent-centered models of Dgu and a drawing pro- 
duced by Algorithm Q of a spanning tree of G rooted at v, for any 
graph G, drawing O^/j and node v of G (see Figures|4]and|3}. 

Algoritlim 2 1. Compute a breadth-first spanning tree T of G 
rooted at v. 

2. Let D„c„ be a drawing produced by running AleorithnU\on 
G and T. 

3. Let Mgiii be a parent-centered model of [D„iij,T) and M„g„ 
be a parent-centered model of {D,iew,T) 

4. For each t in an increasing sequence 0,fi , . . . 1, output a 
polar drawing Dt such that the model of {Dt,T) is described 
recursively as follows. 

(basis, i.e., if vis tlie root of r„evv): (6,(1 — t)r), where 
{9,r) are the polar coordinates ofv in model ofiMgi^f. 

(recursion, i.e., otlierwise:) (tB„ew + (1 - t)d„ij,tr„ev.. + 
(1 — t)rgi^) otherwise, where, for x £ {old, new}, 
{Gx, rx) are the coordinates ofv in Mj . 

Thus, the new root node moves in a straight line to the center of 
the new drawing, and each nonroot node moves via a finite approx- 
imation of a smooth interpolation between its parent-centered polar 



coordinates in the new and old drawings. In the resulting animation, 
newly-central families expand and fan out as they move toward the 
center, while newly-peripheral families shrink as they arc toward 
the periphery. Neighboring family circles are guaranteed not to in- 
terpenetrate. Note that any model M, = {D,,T) will not generally 
look like a model generated by AlgorithmQsince, for instance, the 
root of T may not in M, lie on the origin of the drawing plane. 

Our algorithm is built into a system that first displays a forced- 
directed layout (2| D^/j/ of a given graph G. A user then clicks 
on a node v and the system runs Algorithm|2| the output of which, 
D„e,v, is set to Dgiij the next time Algorithm|2|is called, which is the 
next time a user clicks on a node. Thus, Dgu is typically a drawing 
produced by Algorithm^ 

(though it need not be). 

There are different ways in which one can fix the times ti,. .. ,tp 
when generating the intermediate drawings of an animation. We 
adopted the slow-in, slow-out technique of Yee et al. in our imple- 
mentation so that the values of ti,.. .,tp are concentrated toward the 
boundary values and 1 . 

2.4 Properties 

Our algorithms have some noteworthy properties. 

Aesthetics: Our layout algorithm (1) ensures that all siblings are 
equally distant from their parent, (2) ensures that contain- 
ment arcs of siblings and cousins do not overlap, and (3) pro- 
duces layouts that provide clear indications (via edge-length 
and family shape) of closeness to the root. 



Our animation process also guarantees that certain edges 
never cross. For any graph G, any drawing Dgiij and a node v 
of G, there is a choice for <j> such that for any time t e [0, 1], 
the edges corresponding to the spanning tree upon which D, is 
based do not cross in £),. This has a number of consequences, 
including: 

1 . If G is a tree then the drawing Dt has no edge crossings. 

2. For any node v of G, the edges between v and its chil- 
dren do not cross. 

In the next section we describe experiments that test how well 
Algorithm|2|avoids edge crossings overall. 

Parallelizability: Note that all four steps of Algorithm |2| can 
be implemented as a single traversal of T (i.e., during the 
breadth-first search that produces T). Algorithm|2|thus lends 
itself easily to parallelization, as a new process can be forked 
whenever a node of T is traversed. 
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Figure 5: Isomorphic tree transitions 

Our parent-centered visualization scheme produces no edge crossings 
when transitioning between drawings of the same tree, while Yee et 
al.'s root-centered system produces many. 



3 Experiments 

Our experiments compare our algorithms' layouts and animations 
to those produced by Yee et al.'s algorithms. In each experimental 
trial, a random graph was generated, two distinct root nodes within 
that graph were randomly selected, and the graph was then oper- 
ated upon by both algorithms as they effected transitions from a 
spanning tree rooted at the first node to a spanning tree rooted at 
the second. Each experiment comprised 710 trials per algorithm, in 
which ten random graphs of order 30-100 (inclusive) were gener- 
ated using the Erdos-Renyi model |4j with a 10% probability of an 
edge connecting any two nodes. In our first two experiments, we 
counted edge crossings during transitions by examining all edges 
present during the transition (whether derived from the new span- 
ning tree or the old); a single crossing was counted during a trial 
if two edges crossed at any time during the transition, even if the 
edges crossed and uncrossed multiple times. In our last experiment, 
we measure the lengths of edges for sets of sibling nodes to their 
common parent in static layouts produced by the algorithms. 

3.1 Isomorphic tree transitions 

Because trees are by definition planar, transitional edge crossings 
are potentially avoidable in the special case where selection of a 
new root node does not change a tree's edge set. In this experiment, 
we first extract a spanning tree from a graph rooted at a randomly 
selected root node and construct a new drawing. We then transition 
from this drawing to a second drawing of the same tree but with a 
different node selected as the focal point. 

Figure |5] shows that our algorithms successfully produce zero 
crossings while Yee et al.'s algorithms produce many for this par- 
ticular transition scenario. As illustrated in Figure|3| our approach 
avoids crossings because "family circles" simply expand or contract 
as they move without interpenetrating. In contrast, Yee et al.'s algo- 
rithms maintain visual continuity by preserving the direction of the 
edge from the new root node to its parent in the previous drawing. 
This can produce dramatically different drawings of the same tree, 
and result in crossings during the transitions. 

This visual effect of our animations is similar to that of rigid- 
body animation methods |5]|^ as the user can mentally group sub- 
grap hs as separate objects and follow the movements more easily 

GH. 

3.2 Spanning-tree-to-spanning-tree transitions 

In the second experiment, we counted edge crossings during tran- 
sitions between two different spanning-tree-based drawings of the 



same graph. We first create a spanning-tree-based drawing for a 
graph rooted at a randomly selected node. We then select a second 
node for a new drawing based on a different spanning tree extracted 
from the graph. Unlike in the previous experiment, the edge sets of 
the two drawings are not the same in this experiment. 

Our evaluation distinguishes "transient crossings involving 
fading-out edges" from "transient crossings involving final layout 
edges". A crossing is transient but fading if at least one of the 
edges fades from the viewing plane during the animation sequence. 
A transient and non-fading crossing occurs when both edges are 
part of the final drawing. 

As shown in Figure |6(a)| the two visualization schemes produce 
a comparable number of transient but fading crossings. But Fig- 
ure |6(b)| shows that our algorithms produce fewer transient and non- 
fading crossings than Yee et al.'s, and that this difference grows with 
graph order. 

3.3 Spanning tree sibling edge lengtlis 

Since our approach positions nodes on containment arcs around 
their parent whereas Yee et al. positions nodes on concentric circles 
around the root node, the two systems produce different patterns of 
regularities. In this experiment we quantify those regularities. 

Figure shows that as the generational distance increases from 
the root to nodes at a given depth in the tree, our system produces 
no variance among siblings in within-family distance from node to 
parent, whereas Yee et al.'s system produces substantial variance. 

Conversely, in our system the distance from the root to nodes 
of a given generation can vary, whereas in Yee et al.'s system it 
does not. The variance arises in our case because our algorithm 
adjusts containment arcs to help prevent neighboring family circles 
from overlapping. Although this reduces the reliability of the length 
of edges as an indicator of distance from the root, the self-similar 
geometric pattern of fami ly s ubsystems produces another cue that 
may well be more salient 1 141 . 

4 Discussion and Future Work 

Behavioral tests will be needed to determine whether these alter- 
native layout and transition algorithms are psychologically signifi- 
cant. But our statistical experiments indicate that the drawings and 
animated transitions generated by our algorithms conform to many 
established aesthetics for graph drawings tl;!T9). 

Taken in the context of the prior research on graph drawing aes- 
thetics, these results suggest that our system should reduce a user's 
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Figure 6: Spanning-tre e-to-s panning-tree transitions 
The results in Figure |6(a)| stiows ttnat bottn visualization schemes 
produce similar amounts of edge crossings during transitions be- 
twe en tw o different spanning-tree-based drawings. The results in Fig- 
ure |6(a)| however, clearly show that our parent-centered algorithms 
produced fewer crossings than Yee et al.'s root-centered algorithms. 
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Figure 7: Spanning tree sibling edge lengths 

Edge lengths from siblings to their common parent tend to decrease 
as graph size increases. In our algorithms, siblings are positioned 
equidistant to their common parent. In Yee et al.'s algorithms, edge 
lengths from siblings to common parent vary, as shown by standard 
deviations. 



a parent-centered Euclidean plane, whereas hyperbolic layout algo- 
rithms position and move siblings through a non-Euclidean space. 
The relative computational and psychological merit of these differ- 
ent approaches, however, remains to be determined. 

5 Conclusion 

We have presented a radial graph layout visualization scheme based 
on a parent-centered data model for spanning trees extracted from a 
graph. We introduced a static layout algorithm that produces draw- 
ings of graphs where the root's children are evenly spaced on a cir- 
cle centered at the root and the children of nonroot nodes are evenly 
spaced on a semicircle emanating from their parent. We also in- 
troduced an animation algorithm that smoothly transitions a graph 
from one spanning-tree-based layout to another. We conducted ex- 
periments to compare our experimental system with Yee et al.'s 
graph visualization system 1261 . The results from these experiments 
suggest that our visualization and animation schemes could indeed 
help users understand and explore graphs. 



mental effort and increase a user's capacity to make reliable judg- 
ments and develop useful intuitions about complicated graph struc- 
tures 1 8 19 24 1 . Our research thus lays the groundwork for future 
study of the layout and animation algorithms, of the psychologi- 
cal significance of our metrics, and of the functional validity of the 
graph aesthetics themselves. 

With regard to our algorithms, two areas are particularly ripe for 
further study. First, the drawings produced by both ours and Yee et 
al.'s graph layout algorithm are not guaranteed to be planar; in our 
drawings, edge crossings can occur when long subtrees encroach 
on neighboring containment circles. An alternative method of allo- 
cating containment arcs might make it possible to guarantee planar 
drawings. 

Second, with our approach, remote descendants of the root can 
become vanishingly small on the viewing plane. Our system does 
give users a natural solution to this problem: selecting a different 
root node so as to allocate more space to its descendants ([20)1211. 
However, future research could explore the algorithmic relation be- 
tween our solution versus the dis tortion of the viewing plane in 
hyperbolic visualizations I11II15I . There are clearly differences: 
we position and move siblings by constraining them to circles on 
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